<template>
    <div class="box box_mm">
        <div class="box_main">
            <div class="search_box">
                <div style="display: flex; height: 100%">
                    <div class="search_item">
                        <span style="width: 0.65rem">联系人</span>
                        <el-input
                            v-model="search.input"
                            placeholder="请输入联系人"
                            style="width: 2rem"
                            @keyup.enter="search"
                        ></el-input>
                    </div>
                    <div style="margin-right: 0.3rem"></div>
                    <div class="search_item">
                        <span style="width: 0.8rem">联系电话</span>
                        <el-input
                            v-model="search.phone"
                            placeholder="请输入联系电话"
                            style="width: 2rem"
                            @keyup.enter="search"
                        ></el-input>
                    </div>
                </div>
                <div class="search_item">
                    <el-button
                        type="primary"
                        class="btn_bgcolor"
                        @click="search"
                        >搜索</el-button
                    >
                    <el-button type="info" @click="reset">重置</el-button>
                </div>
            </div>
            <div class="box_cont">
                <div class="btn_list">
                    <!-- <el-button class="mybtn btn_bgcolor" type="primary" @click="daochu">导出</el-button> -->
                </div>
                <div
                    class="mytabbox"
                    style="
                        height: 81vh;
                        padding-top: 10px;
                        box-sizing: border-box;
                    "
                >
                    <Table :tableheader="tableheader" :tabledata="tabledata" ref="mytable">
                        <template v-slot:btns="row">
                            <el-button
                                @click="detail(row.row)"
                                type="success"
                                size="mini"
                                style="margin-right: 0.1rem"
                            >
                                详情
                            </el-button>
                        </template>
                    </Table>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide  } from "vue";
import Table from "@/components/Table.vue";
import { post } from "../../../api/request";
//搜索字段
let search = ref({
    input: "",
    phone: "",
});
//定义表头的数据
const tableheader = ref([
    { key: "id", name: "id", width: "50" },
    { key: "name", name: "姓名", width: "" },
    { key: "date", name: "金额值", width: "" },
    {
        key: "type",
        name: "类型",
        width: "",
        type: "tags",
        typedata: [
            { type: "success", value: "个人" },
            { type: "primary", value: "集体" },
        ],
    },
    { key: "address", name: "地址", width: "" },
]);
//定义表格的数据
const tabledata = ref([
    { id: 1, name: "Item 1", date: "50.00", type: "个人", address: "飞飞飞" },
    { id: 2, name: "Item 1", date: "50.00", type: "集体", address: "飞飞飞" },
    // ...更多
]);
const mytable = ref({currentPage:1})

// 在 onMounted 钩子中发送请求
onMounted(() => {
    
    console.log(mytable.value?.currentPage)
    getdata()
});

const getdata = () => {
    post({
        url: "wwwwwww",
        data: {
            searchinput: search.value.input,//搜索内容
            searchphone: search.value.phone,//搜索内容
            page: mytable.value?.currentPage,//当前页数
            size: 10,//每页显示数量
        },
    }).then((res: any) => {
        console.log(res.code);
    });
}

provide('getdata', getdata);


const detail = (row: any) => {
    console.log(row);
    console.log(row.type);
    // 处理详情逻辑
};
</script>


<style lang="scss" scoped>
@import url('./index.scss');
</style>